<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>列表</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-media {
				font-size: 14px;
			}
			
			.mui-table-view .mui-media-object {
				max-width: initial;
				width: 90px;
				height: 70px;
			}
			
			.meta-info {
				position: absolute;
				left: 115px;
				right: 15px;
				bottom: 8px;
				color: #8f8f94;
			}
			
			.meta-info .author,
			.meta-info .time {
				display: inline-block;
			}
			
			.meta-info .time {
				float: right;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
			
			.banner {
				height: 180px;
				overflow: hidden;
				position: relative;
				background-position: center;
				background-color: #ccc;
			}
			
			.banner img {
				width: 100%;
				height: auto;
			}
			
			.banner .title {
				position: absolute;
				left: 15px;
				bottom: 15px;
				width: 90%;
				font-size: 16px;
				font-weight: 400;
				line-height: 21px;
				color: white;
				z-index: 11;
			}
		</style>
	</head>

	<body >
		<div class="mui-content" id="news" >
				<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" style="height: 200px;" >
						<a href="javascript:;" :data-guid="lastBanner.Id" @tap="open_detail(lastBanner)">
							<img :src="lastBanner.PictureUrl"  style="height: 200px;" />
							<p class="mui-slider-title" style="font-weight: 500;">{{lastBanner.ArticleTitle}}</p>
						</a>
					</div>
					<div class="mui-slider-item" style="height: 200px;"  v-for="ban in banner">
						<a  href="javascript:;" :data-guid="ban.Id" @tap="open_detail(ban)">
							<img :src="ban.PictureUrl" style="height: 200px;" />
						<p class="mui-slider-title">{{ban.ArticleTitle}}</p>
						</a>
					</div>
					
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" style="height: 200px;" >
						<a href="javascript:;" :data-guid="firstBanner.Id" @tap="open_detail(firstBanner)">
							<img :src="firstBanner.PictureUrl"  style="height: 200px;" />
						<p class="mui-slider-title">{{firstBanner.ArticleTitle}}</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!--列表信息流 开始-->
			<div id="list" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:;" :data-guid="item.Id" @tap="open_detail(item)">
								<img class="mui-media-object mui-pull-left" :src="item.PictureUrl">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2">{{item.ArticleTitle}}</div>
								</div>
								<div class="meta-info">
									<div class="author">{{item.HotValue}}</div>
									<div class="time">{{item.PublishTime3}}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!--列表信息流 结束-->
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js"></script>
		<script type="text/javascript">
			var lastId = '',
				minId = ''; //最新新闻的id 
			var mpageIndex = 1;
			var mpageSize = 10;
			var webview_detail = null; //详情页webview
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}
		
			//自动轮播
			function activeSilder() {
				var slider = mui("#slider");
				slider.slider({
					interval: 5000
				});
			}

			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
		
			/**
			 *  下拉刷新获取最新列表 
			 */
			function pulldownRefresh() {
				
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}

				var dataArt = {
					column: "Id,ArticleTitle,HotValue,ArticleType,Author,AuthorAbout,PictureUrl,PublishTime2,PublishTime3,ArticleContent" //需要的字段名
				}
				
				//请求顶部banner信息
				var toplistDataUrl = GetGlobalConfig();
				mui.getJSON(toplistDataUrl, dataArt, function(rsp) {
					var obj = JSON.parse(rsp);
					//news.firstBanner=obj[0];
					news.firstBanner = {
						Id: obj[0].Id,
						ArticleTitle: obj[0].ArticleTitle,
						HotValue: obj[0].HotValue,
						ArticleType: obj[0].ArticleType,
						Author: obj[0].Author,
						AuthorAbout: obj[0].AuthorAbout,
						PictureUrl: GetGlobalConfig()+"uploadimages/"+obj[0].PictureUrl,
						PublishTime2: obj[0].PublishTime2,
						PublishTime3: obj[0].PublishTime3,
						ArticleContent: obj[0].ArticleContent
					};
					news.lastBanner = {
						Id: obj[2].Id,
						ArticleTitle: obj[2].ArticleTitle,
						HotValue: obj[2].HotValue,
						ArticleType: obj[2].ArticleType,
						Author: obj[2].Author,
						AuthorAbout: obj[2].AuthorAbout,
						PictureUrl: GetGlobalConfig()+"uploadimages/"+obj[2].PictureUrl,
						PublishTime2: obj[2].PublishTime2,
						PublishTime3: obj[2].PublishTime3,
						ArticleContent: obj[2].ArticleContent
					};	
					news.banner = convert2(obj);
				});

				mpageIndex = 1;

				//请求最新列表信息流
				var listDataUrl = GetGlobalConfig();
				mui.getJSON(listDataUrl, dataArt, function(rsp) {
					mui('#list').pullRefresh().endPulldownToRefresh();

					if(rsp && rsp.length > 0) {
						var obj = JSON.parse(rsp);
						news.items = convert2(obj);
					}
				});
				activeSilder();
			}

			/**
			 * 上拉加载拉取历史列表 
			 */
			function pullupRefresh() {
				var dataArt = {
					column: "Id,ArticleTitle,HotValue,ArticleType,Author,AuthorAbout,PictureUrl,PublishTime2,PublishTime3,ArticleContent" //需要的字段名
				}

				mpageIndex++;
				console.log(mpageIndex);
				//请求历史列表信息流
				var listDataUrl = GetGlobalConfig() ;
				mui.getJSON(listDataUrl, dataArt, function(rsp) {
					mui('#list').pullRefresh().endPullupToRefresh();
					if(rsp && rsp.length > 0) {
						var obj = JSON.parse(rsp);
						//minId = rsp[rsp.length - 1].id; //保存最后一条消息的id，上拉加载时使用
						news.items = news.items.concat(convert2(obj));
					}
				});
			}

			mui.plusReady(function() {
				//预加载详情页
				webview_detail = mui.preload({
					url: 'detail.html',
					id: 'news_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
					}
				});
			});

			var news = new Vue({
				el: '#news',
				data: {
					firstBanner:{},
					lastBanner:{},
					banner: [], //顶部banner数据
					items: [] //列表信息流数据
				}
			});

			/**
			 * 打开新闻详情
			 * 
			 * @param {Object} item 当前点击的新闻对象
			 */
			function open_detail(item) {
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					Id: item.Id,
					ArticleTitle: item.ArticleTitle,
					HotValue: item.HotValue,
					ArticleType: item.ArticleType,
					Author: item.Author,
					AuthorAbout: item.AuthorAbout,
					PictureUrl: item.PictureUrl,
					PublishTime2: item.PublishTime2,
					PublishTime3: item.PublishTime3,
					ArticleContent: item.ArticleContent
				});

				//更改详情页原生导航条信息
				titleNView.titleText = item.ArticleTitle;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert2(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						Id: item.Id,
						ArticleTitle: item.ArticleTitle,
						HotValue: item.HotValue,
						ArticleType: item.ArticleType,
						Author: item.Author,
						AuthorAbout: item.AuthorAbout,
						PictureUrl: GetGlobalConfig()+"uploadimages/"+item.PictureUrl,
						PublishTime2: item.PublishTime2,
						PublishTime3: item.PublishTime3,
						ArticleContent: item.ArticleContent
					});
				});
				return newItems;
			}
			

			/**
			 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
			 */
			var dateUtils = {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				humanize: function(milliseconds) {
					var humanize = '';
					mui.each(this.UNITS, function(unit, value) {
						if(milliseconds >= value) {
							humanize = Math.floor(milliseconds / value) + unit + '前';
							return false;
						}
						return true;
					});
					return humanize || '刚刚';
				},
				format: function(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if(diff < this.UNITS['天']) {
						return this.humanize(diff);
					}

					var _format = function(number) {
						return(number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				}
			};
		</script>
	</body>

</html>